<template>
  <div class="bg" style="background: #091739">
    <div class="header">
      <img src="../img/head.svg">
      <div class="box">
        <div class="title" style="cursor: pointer" @click="openXJ">数智化控制中心</div>
      </div>
    </div>

    <div class="dp_con">
      <div class="dydxs_box">
        <div class="row">
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>监测区域</span>
                <img class="icon2" src="../img/icon2.svg">
              </div>
              <div class="body">
                <div class="sbdxj_t2" style="height: 100%">
                  <div class="flex_c_c">
                    <div class="flex-0">
                      <img src="../img/icon12.svg">
                    </div>
                    <div class="flex-0">
                      <p class="text1" style="cursor: pointer" @click="openGYDXS">高压地下室</p>
                    </div>
                  </div>
                  <div class="flex_c_c">
                    <div class="flex-0">
                      <img src="../img/icon12.svg">
                    </div>
                    <div class="flex-0">
                      <p class="text1" style="color: #00F8FF;font-size: 24px">低压地下室</p>
                    </div>
                  </div>
                  <div class="flex_c_c">
                    <div class="flex-0">
                      <img src="../img/icon12.svg">
                    </div>
                    <div class="flex-0">
                      <p class="text1" style="cursor: pointer" @click="openRYDXS">乳液地下室</p>
                    </div>
                  </div>
                  <div class="flex_c_c">
                    <div class="flex-0">
                      <img src="../img/icon12.svg">
                    </div>
                    <div class="flex-0">
                      <p class="text1" style="cursor: pointer" @click="openXYDXS">稀油地下室</p>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="col" style="width: 40%">
            <div class="dydxs_t1">
              <img src="../img/p13.svg" class="sb">
              <div class="card2" style="left: 5%;top: 5%">
                <div class="bg2">
                  <div class="r1">
                    <img src="../img/card1.png">
                    <img src="../img/card2.png">
                    <img src="../img/card3.png">
                  </div>
                  <img class="r2" src="../img/card4.png">
                  <div class="r3">
                    <img src="../img/card5.png">
                    <img src="../img/card6.png">
                    <img src="../img/card7.png">
                  </div>
                </div>
                <div class="box">
                  <table class="sbdxj_t3">
                    <tr>
                      <td rowspan="4" style="color: #00F8FF;">低压管路</td>
                      <td class="text2">压力</td>
                      <td><input readonly v-model="low_pressure_station['pressure']"></td>
                      <td>Mpa</td>
                    </tr>
                    <tr>
                      <td class="text2">温度</td>
                      <td><input readonly v-model="low_pressure_station['temperature']"></td>
                      <td>℃</td>
                    </tr>
                    <tr>
                      <td class="text2">液位</td>
                      <!-- <td v-if="low_pressure_station['liquid_level_alarm']===constant.yewei_alarm"><input style="color:#FF0000" readonly v-model="low_pressure_station['liquid_level_alarm']"></td>
                      <td v-else><input  readonly v-model="low_pressure_station['liquid_level_alarm']"></td> -->

                        <td>
                            <input v-if="low_pressure_station['liquid_level_alarm']===constant.yewei_alarm" style="color: #FF0000" readonly value="警告">
                            <input v-else style="color: #00f535" readonly value="正常">
                        </td>
                      <td></td>
                    </tr>
                    <tr>
                      <td class="text2">急停</td>
                      <td>
                            <input v-if="low_pressure_station['emergency_stop']===constant.stop_alarm" style="color: #FF0000" readonly value="警告">
                            <input v-else style="color: #00f535" readonly value="正常">
                        </td>
                      <td></td>

                      <!-- <td v-if="low_pressure_station['emergency_stop']===constant.stop_alarm"><input style="color:#FF0000" readonly v-model="low_pressure_station['emergency_stop']"></td>
                      <td v-else><input  readonly v-model="low_pressure_station['emergency_stop']"></td>
                      <td><span v-if="low_pressure_station['emergency_stop']===constant.stop_alarm" style="color:#FF0000">警告</span></td> -->
                    </tr>
<!--                    <tr v-if="low_pressure_station['liquid_level_alarm']===constant.yewei_alarm">-->
<!--                      <td class="text2">液位</td>-->
<!--                      <td colspan="2">-->
<!--                        <div class="flex">-->
<!--                          <img src="../img/icon13.svg">-->
<!--                          <span>液位低报警</span>-->
<!--                        </div>-->
<!--                      </td>-->
<!--                    </tr>-->


                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>7#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_07" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT613'] && alarmRule['TAT613']['temp']">
                      <td v-if="TAT613['temp']>=alarmRule['TAT613']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT613['temp']"></td>
                      <td v-else-if="TAT613['temp']>=alarmRule['TAT613']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT613['temp']"></td>
                      <td v-else><input readonly v-model="TAT613['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT613['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT613'] && alarmRule['TAT613']['ax']">
                      <td v-if="TAT613['ax']>=alarmRule['TAT613']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT613['ax']"></td>
                      <td v-else-if="TAT613['ax']>=alarmRule['TAT613']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT613['ax']"></td>
                      <td v-else><input readonly v-model="TAT613['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT613['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT613'] && alarmRule['TAT613']['ay']">
                      <td v-if="TAT613['ay']>=alarmRule['TAT613']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT613['ay']"></td>
                      <td v-else-if="TAT613['ay']>=alarmRule['TAT613']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT613['ay']"></td>
                      <td v-else><input readonly v-model="TAT613['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT613['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT613'] && alarmRule['TAT613']['az']">
                      <td v-if="TAT613['az']>=alarmRule['TAT613']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT613['az']"></td>
                      <td v-else-if="TAT613['az']>=alarmRule['TAT613']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT613['az']"></td>
                      <td v-else><input readonly v-model="TAT613['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT613['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT614'] && alarmRule['TAT614']['temp']">
                      <td v-if="TAT614['temp']>=alarmRule['TAT614']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT614['temp']"></td>
                      <td v-else-if="TAT614['temp']>=alarmRule['TAT614']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT614['temp']"></td>
                      <td v-else><input readonly v-model="TAT614['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT614['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT614'] && alarmRule['TAT614']['ax']">
                      <td v-if="TAT614['ax']>=alarmRule['TAT614']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT614['ax']"></td>
                      <td v-else-if="TAT614['ax']>=alarmRule['TAT614']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT614['ax']"></td>
                      <td v-else><input readonly v-model="TAT614['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT614['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT614'] && alarmRule['TAT614']['ay']">
                      <td v-if="TAT614['ay']>=alarmRule['TAT614']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT614['ay']"></td>
                      <td v-else-if="TAT614['ay']>=alarmRule['TAT614']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT614['ay']"></td>
                      <td v-else><input readonly v-model="TAT614['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT614['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT614'] && alarmRule['TAT614']['az']">
                      <td v-if="TAT614['az']>=alarmRule['TAT614']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT614['az']"></td>
                      <td v-else-if="TAT614['az']>=alarmRule['TAT614']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT614['az']"></td>
                      <td v-else><input readonly v-model="TAT614['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT614['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>6#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_06" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT611'] && alarmRule['TAT611']['temp']">
                      <td v-if="TAT611['temp']>=alarmRule['TAT611']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT611['temp']"></td>
                      <td v-else-if="TAT611['temp']>=alarmRule['TAT611']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT611['temp']"></td>
                      <td v-else><input readonly v-model="TAT611['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT611['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT611'] && alarmRule['TAT611']['ax']">
                      <td v-if="TAT611['ax']>=alarmRule['TAT611']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT611['ax']"></td>
                      <td v-else-if="TAT611['ax']>=alarmRule['TAT611']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT611['ax']"></td>
                      <td v-else><input readonly v-model="TAT611['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT611['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT611'] && alarmRule['TAT611']['ay']">
                      <td v-if="TAT611['ay']>=alarmRule['TAT611']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT611['ay']"></td>
                      <td v-else-if="TAT611['ay']>=alarmRule['TAT611']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT611['ay']"></td>
                      <td v-else><input readonly v-model="TAT611['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT611['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT611'] && alarmRule['TAT611']['az']">
                      <td v-if="TAT611['az']>=alarmRule['TAT611']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT611['az']"></td>
                      <td v-else-if="TAT611['az']>=alarmRule['TAT611']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT611['az']"></td>
                      <td v-else><input readonly v-model="TAT611['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT611['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT612'] && alarmRule['TAT612']['temp']">
                      <td v-if="TAT612['temp']>=alarmRule['TAT612']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT612['temp']"></td>
                      <td v-else-if="TAT612['temp']>=alarmRule['TAT612']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT612['temp']"></td>
                      <td v-else><input readonly v-model="TAT612['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT612['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT612'] && alarmRule['TAT612']['ax']">
                      <td v-if="TAT612['ax']>=alarmRule['TAT612']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT612['ax']"></td>
                      <td v-else-if="TAT612['ax']>=alarmRule['TAT612']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT612['ax']"></td>
                      <td v-else><input readonly v-model="TAT612['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT612['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT612'] && alarmRule['TAT612']['ay']">
                      <td v-if="TAT612['ay']>=alarmRule['TAT612']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT612['ay']"></td>
                      <td v-else-if="TAT612['ay']>=alarmRule['TAT612']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT612['ay']"></td>
                      <td v-else><input readonly v-model="TAT612['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT612['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT612'] && alarmRule['TAT612']['az']">
                      <td v-if="TAT612['az']>=alarmRule['TAT612']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT612['az']"></td>
                      <td v-else-if="TAT612['az']>=alarmRule['TAT612']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT612['az']"></td>
                      <td v-else><input readonly v-model="TAT612['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT612['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>1#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_01" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT601'] && alarmRule['TAT601']['temp']">
                      <td v-if="TAT601['temp']>=alarmRule['TAT601']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT601['temp']"></td>
                      <td v-else-if="TAT601['temp']>=alarmRule['TAT601']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT601['temp']"></td>
                      <td v-else><input readonly v-model="TAT601['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT601['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT601'] && alarmRule['TAT601']['ax']">
                      <td v-if="TAT601['ax']>=alarmRule['TAT601']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT601['ax']"></td>
                      <td v-else-if="TAT601['ax']>=alarmRule['TAT601']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT601['ax']"></td>
                      <td v-else><input readonly v-model="TAT601['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT601['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT601'] && alarmRule['TAT601']['ay']">
                      <td v-if="TAT601['ay']>=alarmRule['TAT601']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT601['ay']"></td>
                      <td v-else-if="TAT601['ay']>=alarmRule['TAT601']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT601['ay']"></td>
                      <td v-else><input readonly v-model="TAT601['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT601['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT601'] && alarmRule['TAT601']['az']">
                      <td v-if="TAT601['az']>=alarmRule['TAT601']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT601['az']"></td>
                      <td v-else-if="TAT601['az']>=alarmRule['TAT601']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT601['az']"></td>
                      <td v-else><input readonly v-model="TAT601['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT601['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT602'] && alarmRule['TAT602']['temp']">
                      <td v-if="TAT602['temp']>=alarmRule['TAT602']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT602['temp']"></td>
                      <td v-else-if="TAT602['temp']>=alarmRule['TAT602']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT602['temp']"></td>
                      <td v-else><input readonly v-model="TAT602['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT602['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT602'] && alarmRule['TAT602']['ax']">
                      <td v-if="TAT602['ax']>=alarmRule['TAT602']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT602['ax']"></td>
                      <td v-else-if="TAT602['ax']>=alarmRule['TAT602']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT602['ax']"></td>
                      <td v-else><input readonly v-model="TAT602['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT602['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT602'] && alarmRule['TAT602']['ay']">
                      <td v-if="TAT602['ay']>=alarmRule['TAT602']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT602['ay']"></td>
                      <td v-else-if="TAT602['ay']>=alarmRule['TAT602']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT602['ay']"></td>
                      <td v-else><input readonly v-model="TAT602['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT602['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT602'] && alarmRule['TAT602']['az']">
                      <td v-if="TAT602['az']>=alarmRule['TAT602']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT602['az']"></td>
                      <td v-else-if="TAT602['az']>=alarmRule['TAT602']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT602['az']"></td>
                      <td v-else><input readonly v-model="TAT602['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT602['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>2#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_02" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT603'] && alarmRule['TAT603']['temp']">
                      <td v-if="TAT603['temp']>=alarmRule['TAT603']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT603['temp']"></td>
                      <td v-else-if="TAT603['temp']>=alarmRule['TAT603']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT603['temp']"></td>
                      <td v-else><input readonly v-model="TAT603['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT603['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT603'] && alarmRule['TAT603']['ax']">
                      <td v-if="TAT603['ax']>=alarmRule['TAT603']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT603['ax']"></td>
                      <td v-else-if="TAT603['ax']>=alarmRule['TAT603']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT603['ax']"></td>
                      <td v-else><input readonly v-model="TAT603['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT603['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT603'] && alarmRule['TAT603']['ay']">
                      <td v-if="TAT603['ay']>=alarmRule['TAT603']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT603['ay']"></td>
                      <td v-else-if="TAT603['ay']>=alarmRule['TAT603']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT603['ay']"></td>
                      <td v-else><input readonly v-model="TAT603['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT603['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT603'] && alarmRule['TAT603']['az']">
                      <td v-if="TAT603['az']>=alarmRule['TAT603']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT603['az']"></td>
                      <td v-else-if="TAT603['az']>=alarmRule['TAT603']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT603['az']"></td>
                      <td v-else><input readonly v-model="TAT603['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT603['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT604'] && alarmRule['TAT604']['temp']">
                      <td v-if="TAT604['temp']>=alarmRule['TAT604']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT604['temp']"></td>
                      <td v-else-if="TAT604['temp']>=alarmRule['TAT604']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT604['temp']"></td>
                      <td v-else><input readonly v-model="TAT604['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT604['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT604'] && alarmRule['TAT604']['ax']">
                      <td v-if="TAT604['ax']>=alarmRule['TAT604']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT604['ax']"></td>
                      <td v-else-if="TAT604['ax']>=alarmRule['TAT604']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT604['ax']"></td>
                      <td v-else><input readonly v-model="TAT604['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT604['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT604'] && alarmRule['TAT604']['ay']">
                      <td v-if="TAT604['ay']>=alarmRule['TAT604']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT604['ay']"></td>
                      <td v-else-if="TAT604['ay']>=alarmRule['TAT604']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT604['ay']"></td>
                      <td v-else><input readonly v-model="TAT604['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT604['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT604'] && alarmRule['TAT604']['az']">
                      <td v-if="TAT604['az']>=alarmRule['TAT604']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT604['az']"></td>
                      <td v-else-if="TAT604['az']>=alarmRule['TAT604']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT604['az']"></td>
                      <td v-else><input readonly v-model="TAT604['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT604['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>3#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_03" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT605'] && alarmRule['TAT605']['temp']">
                      <td v-if="TAT605['temp']>=alarmRule['TAT605']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT605['temp']"></td>
                      <td v-else-if="TAT605['temp']>=alarmRule['TAT605']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT605['temp']"></td>
                      <td v-else><input readonly v-model="TAT605['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT605['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT605'] && alarmRule['TAT605']['ax']">
                      <td v-if="TAT605['ax']>=alarmRule['TAT605']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT605['ax']"></td>
                      <td v-else-if="TAT605['ax']>=alarmRule['TAT605']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT605['ax']"></td>
                      <td v-else><input readonly v-model="TAT605['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT605['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT605'] && alarmRule['TAT605']['ay']">
                      <td v-if="TAT605['ay']>=alarmRule['TAT605']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT605['ay']"></td>
                      <td v-else-if="TAT605['ay']>=alarmRule['TAT605']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT605['ay']"></td>
                      <td v-else><input readonly v-model="TAT605['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT605['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT605'] && alarmRule['TAT605']['az']">
                      <td v-if="TAT605['az']>=alarmRule['TAT605']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT605['az']"></td>
                      <td v-else-if="TAT605['az']>=alarmRule['TAT605']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT605['az']"></td>
                      <td v-else><input readonly v-model="TAT605['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT605['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT606'] && alarmRule['TAT606']['temp']">
                      <td v-if="TAT606['temp']>=alarmRule['TAT606']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT606['temp']"></td>
                      <td v-else-if="TAT606['temp']>=alarmRule['TAT606']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT606['temp']"></td>
                      <td v-else><input readonly v-model="TAT606['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT606['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT606'] && alarmRule['TAT606']['ax']">
                      <td v-if="TAT606['ax']>=alarmRule['TAT606']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT606['ax']"></td>
                      <td v-else-if="TAT606['ax']>=alarmRule['TAT606']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT606['ax']"></td>
                      <td v-else><input readonly v-model="TAT606['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT606['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT606'] && alarmRule['TAT606']['ay']">
                      <td v-if="TAT606['ay']>=alarmRule['TAT606']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT606['ay']"></td>
                      <td v-else-if="TAT606['ay']>=alarmRule['TAT606']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT606['ay']"></td>
                      <td v-else><input readonly v-model="TAT606['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT606['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT606'] && alarmRule['TAT606']['az']">
                      <td v-if="TAT606['az']>=alarmRule['TAT606']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT606['az']"></td>
                      <td v-else-if="TAT606['az']>=alarmRule['TAT606']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT606['az']"></td>
                      <td v-else><input readonly v-model="TAT606['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT606['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>4#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_04" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT607'] && alarmRule['TAT607']['temp']">
                      <td v-if="TAT607['temp']>=alarmRule['TAT607']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT607['temp']"></td>
                      <td v-else-if="TAT607['temp']>=alarmRule['TAT607']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT607['temp']"></td>
                      <td v-else><input readonly v-model="TAT607['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT607['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT607'] && alarmRule['TAT607']['ax']">
                      <td v-if="TAT607['ax']>=alarmRule['TAT607']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT607['ax']"></td>
                      <td v-else-if="TAT607['ax']>=alarmRule['TAT607']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT607['ax']"></td>
                      <td v-else><input readonly v-model="TAT607['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT607['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT607'] && alarmRule['TAT607']['ay']">
                      <td v-if="TAT607['ay']>=alarmRule['TAT607']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT607['ay']"></td>
                      <td v-else-if="TAT607['ay']>=alarmRule['TAT607']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT607['ay']"></td>
                      <td v-else><input readonly v-model="TAT607['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT607['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT607'] && alarmRule['TAT607']['az']">
                      <td v-if="TAT607['az']>=alarmRule['TAT607']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT607['az']"></td>
                      <td v-else-if="TAT607['az']>=alarmRule['TAT607']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT607['az']"></td>
                      <td v-else><input readonly v-model="TAT607['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT607['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT608'] && alarmRule['TAT608']['temp']">
                      <td v-if="TAT608['temp']>=alarmRule['TAT608']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT608['temp']"></td>
                      <td v-else-if="TAT608['temp']>=alarmRule['TAT608']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT608['temp']"></td>
                      <td v-else><input readonly v-model="TAT608['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT608['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT608'] && alarmRule['TAT608']['ax']">
                      <td v-if="TAT608['ax']>=alarmRule['TAT608']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT608['ax']"></td>
                      <td v-else-if="TAT608['ax']>=alarmRule['TAT608']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT608['ax']"></td>
                      <td v-else><input readonly v-model="TAT608['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT608['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT608'] && alarmRule['TAT608']['ay']">
                      <td v-if="TAT608['ay']>=alarmRule['TAT608']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT608['ay']"></td>
                      <td v-else-if="TAT608['ay']>=alarmRule['TAT608']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT608['ay']"></td>
                      <td v-else><input readonly v-model="TAT608['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT608['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT608'] && alarmRule['TAT608']['az']">
                      <td v-if="TAT608['az']>=alarmRule['TAT608']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT608['az']"></td>
                      <td v-else-if="TAT608['az']>=alarmRule['TAT608']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT608['az']"></td>
                      <td v-else><input readonly v-model="TAT608['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT608['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card" style="height: 100%">
              <div class="title">
                <img class="icon1" src="../img/icon1.svg">
                <span>5#供给泵</span>
                <img class="icon2" src="../img/icon2.svg">
                <span v-if="lp_pump_05" class="tag">启动</span>
                <span v-else class="tag red">停机</span>
              </div>
              <div class="body" style="overflow: auto;">
                <table class="sbdxj_t3">
                  <tr>
                    <td class="text1">电机端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT609'] && alarmRule['TAT609']['temp']">
                      <td v-if="TAT609['temp']>=alarmRule['TAT609']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT609['temp']"></td>
                      <td v-else-if="TAT609['temp']>=alarmRule['TAT609']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT609['temp']"></td>
                      <td v-else><input readonly v-model="TAT609['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT609['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT609'] && alarmRule['TAT609']['ax']">
                      <td v-if="TAT609['ax']>=alarmRule['TAT609']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT609['ax']"></td>
                      <td v-else-if="TAT609['ax']>=alarmRule['TAT609']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT609['ax']"></td>
                      <td v-else><input readonly v-model="TAT609['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT609['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT609'] && alarmRule['TAT609']['ay']">
                      <td v-if="TAT609['ay']>=alarmRule['TAT609']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT609['ay']"></td>
                      <td v-else-if="TAT609['ay']>=alarmRule['TAT609']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT609['ay']"></td>
                      <td v-else><input readonly v-model="TAT609['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT609['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT609'] && alarmRule['TAT609']['az']">
                      <td v-if="TAT609['az']>=alarmRule['TAT609']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT609['az']"></td>
                      <td v-else-if="TAT609['az']>=alarmRule['TAT609']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT609['az']"></td>
                      <td v-else><input readonly v-model="TAT609['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT609['az']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td colspan="4" style="height: 20px"></td>
                  </tr>
                  <tr>
                    <td class="text1">泵端</td>
                    <td>温度</td>
                    <template v-if="alarmRule && alarmRule['TAT610'] && alarmRule['TAT610']['temp']">
                      <td v-if="TAT610['temp']>=alarmRule['TAT610']['temp']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT610['temp']"></td>
                      <td v-else-if="TAT610['temp']>=alarmRule['TAT610']['temp']['HV']"><input style="color:#FFA500" readonly v-model="TAT610['temp']"></td>
                      <td v-else><input readonly v-model="TAT610['temp']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT610['temp']"></td>
                    <td>℃</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>X轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT610'] && alarmRule['TAT610']['ax']">
                      <td v-if="TAT610['ax']>=alarmRule['TAT610']['ax']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT610['ax']"></td>
                      <td v-else-if="TAT610['ax']>=alarmRule['TAT610']['ax']['HV']"><input style="color:#FFA500" readonly v-model="TAT610['ax']"></td>
                      <td v-else><input readonly v-model="TAT610['ax']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT610['ax']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Y轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT610'] && alarmRule['TAT610']['ay']">
                      <td v-if="TAT610['ay']>=alarmRule['TAT610']['ay']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT610['ay']"></td>
                      <td v-else-if="TAT610['ay']>=alarmRule['TAT610']['ay']['HV']"><input style="color:#FFA500" readonly v-model="TAT610['ay']"></td>
                      <td v-else><input readonly v-model="TAT610['ay']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT610['ay']"></td>
                    <td>m/s2</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>Z轴加速度</td>
                    <template v-if="alarmRule && alarmRule['TAT610'] && alarmRule['TAT610']['az']">
                      <td v-if="TAT610['az']>=alarmRule['TAT610']['az']['HHV']"><input style="color:#FF0000;" readonly v-model="TAT610['az']"></td>
                      <td v-else-if="TAT610['az']>=alarmRule['TAT610']['az']['HV']"><input style="color:#FFA500" readonly v-model="TAT610['az']"></td>
                      <td v-else><input readonly v-model="TAT610['az']"></td>
                    </template>
                    <td v-else><input readonly v-model="TAT610['az']"></td>
                    <td>m/s2</td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="../img/footer.svg">
    </div>
  </div>
</template>

<script>
import {initTheme} from '@/components/SettingDrawer/settingConfig'
import defaultSettings from '@/config/defaultSettings'
import {SysMixin} from '@/mixins/SysMixin'
import constant from '@/views/kzzx/utils/constant'
import { device_data ,alarm_rule} from '@/views/kzzx/utils/api'

export default {
  name: 'dydxs',
  components: {},
  mixins:[SysMixin],
  beforeDestroy () {
    if(this.timmer){
      console.log("清除定时器")
      clearTimeout(this.timmer)
    }
  },

  data () {
    return {
      constant,
      visible:false,
      timmer:null,
      interval:1000*60*5,
      low_pressure_station:{},
      lp_pump_01:{},
      lp_pump_02:{},
      lp_pump_03:{},
      lp_pump_04:{},
      lp_pump_05:{},
      lp_pump_06:{},
      lp_pump_07:{},

      TAT601:{},
      TAT602:{},
      TAT603:{},
      TAT604:{},
      TAT605:{},
      TAT606:{},
      TAT607:{},
      TAT608:{},
      TAT609:{},
      TAT610:{},
      TAT611:{},
      TAT612:{},
      TAT613:{},
      TAT614:{},

      //报警标准
      alarmRule:{}

    }
  },
  // 监听属性
  computed: {

  },
  created () {},
  mounted () {
    document.title = "低压地下室"
    let that = this
    this.initTheme()
    that.$nextTick(() => {
      that.query()
    })
  },
  destroy () {

  },
  methods: {
    showModal() {
      this.visible = true;
    },
    initTheme(){
      let theme = localStorage.getItem(defaultSettings.localStorageThemeKey)
      initTheme(theme || defaultSettings.primaryTheme)
    },
    handleOk(e) {

      this.visible = false;

    },
    handleCancel(e) {
      this.visible = false;
    },

    query(){
      this.queryAlarmRule()
      this.queryDYZ()
      this.queryLpPump01()
      this.queryLpPump02()
      this.queryLpPump03()
      this.queryLpPump04()
      this.queryLpPump05()
      this.queryLpPump06()
      this.queryLpPump07()
      this.queryTAT601()
      this.queryTAT602()
      this.queryTAT603()
      this.queryTAT604()
      this.queryTAT605()
      this.queryTAT606()
      this.queryTAT607()
      this.queryTAT608()
      this.queryTAT609()
      this.queryTAT610()
      this.queryTAT611()
      this.queryTAT612()
      this.queryTAT613()
      this.queryTAT614()

      if(this.timmer){
        clearTimeout(this.timmer)
      }
      this.timmer = setTimeout(() => {
        this.query()
      }, this.interval)
    },

    //低压站
    queryDYZ(){
      device_data(constant.low_pressure_station).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryGYZ",res)
        if(constant.successCode===res.code){
          this.low_pressure_station = res.data.values
        }
      })
    },

    //运行状态
    queryLpPump01(){
      device_data(constant.lp_pump_01).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump01",res)
        if(constant.successCode===res.code){
          this.lp_pump_01 = res.data.values.run
        }
      })
    },
    queryLpPump02(){
      device_data(constant.lp_pump_02).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump02",res)
        if(constant.successCode===res.code){
          this.lp_pump_02 = res.data.values.run
        }
      })
    },

    queryLpPump03(){
      device_data(constant.lp_pump_03).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump03",res)
        if(constant.successCode===res.code){
          this.lp_pump_03 = res.data.values.run
        }
      })
    },
    queryLpPump04(){
      device_data(constant.lp_pump_04).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump04",res)
        if(constant.successCode===res.code){
          this.lp_pump_04 = res.data.values.run
        }
      })
    },
    queryLpPump05(){
      device_data(constant.lp_pump_05).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump05",res)
        if(constant.successCode===res.code){
          this.lp_pump_05 = res.data.values.run
        }
      })
    },

    queryLpPump06(){
      device_data(constant.lp_pump_06).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump06",res)
        if(constant.successCode===res.code){
          this.lp_pump_06 = res.data.values.run
        }
      })
    },
    queryLpPump07(){
      device_data(constant.lp_pump_07).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryLpPump07",res)
        if(constant.successCode===res.code){
          this.lp_pump_07 = res.data.values.run
        }
      })
    },

    queryTAT601(){
      device_data(constant.TAT601).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT601",res)
        if(constant.successCode===res.code){
          this.TAT601 = res.data.values
        }
      })
    },
    queryTAT602(){
      device_data(constant.TAT602).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT602",res)
        if(constant.successCode===res.code){
          this.TAT602 = res.data.values
        }
      })
    },
    queryTAT603(){
      device_data(constant.TAT603).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT603",res)
        if(constant.successCode===res.code){
          this.TAT603 = res.data.values
        }
      })
    },
    queryTAT604(){
      device_data(constant.TAT604).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT604",res)
        if(constant.successCode===res.code){
          this.TAT604 = res.data.values
        }
      })
    },

    queryTAT605(){
      device_data(constant.TAT605).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT605",res)
        if(constant.successCode===res.code){
          this.TAT605 = res.data.values
        }
      })
    },

    queryTAT606(){
      device_data(constant.TAT606).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT606",res)
        if(constant.successCode===res.code){
          this.TAT606 = res.data.values
        }
      })
    },

    queryTAT607(){
      device_data(constant.TAT607).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT607",res)
        if(constant.successCode===res.code){
          this.TAT607 = res.data.values
        }
      })
    },
    queryTAT608(){
      device_data(constant.TAT601).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT608",res)
        if(constant.successCode===res.code){
          this.TAT608 = res.data.values
        }
      })
    },

    queryTAT609(){
      device_data(constant.TAT609).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT609",res)
        if(constant.successCode===res.code){
          this.TAT609 = res.data.values
        }
      })
    },
    queryTAT610(){
      device_data(constant.TAT610).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT610",res)
        if(constant.successCode===res.code){
          this.TAT610 = res.data.values
        }
      })
    },
    queryTAT611(){
      device_data(constant.TAT610).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT611",res)
        if(constant.successCode===res.code){
          this.TAT611 = res.data.values
        }
      })
    },
    queryTAT612(){
      device_data(constant.TAT612).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT612",res)
        if(constant.successCode===res.code){
          this.TAT612 = res.data.values
        }
      })
    },
    queryTAT613(){
      device_data(constant.TAT613).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT613",res)
        if(constant.successCode===res.code){
          this.TAT613 = res.data.values
        }
      })
    },
    queryTAT614(){
      device_data(constant.TAT614).then(res=>{
        console.log("接口：/api/device/data/latest","方法：queryTAT614",res)
        if(constant.successCode===res.code){
          this.TAT614 = res.data.values
        }
      })
    },

    queryAlarmRule(){
      for(let i=1;i<=14;i++){
        let index = i
        if(i<10){
          index = "0"+i
        }
        alarm_rule('TAT6'+index).then(res=>{
          console.log(res)
          if(constant.successCode===res.code){
            let rule = {}
            for (const item of res.data){
              rule[item.propertyId] = {}
              rule[item.propertyId]["HV"] = item.HV
              rule[item.propertyId]["HHV"] = item.HHV
            }
            this.alarmRule['TAT6'+index] = rule
          }

        })
      }
    },

    openGYDXS(){
      this.$router.push('/gydxs')
    },

    openRYDXS(){
      this.$router.push('/rydxs')
    },
    openXYDXS(){
      this.$router.push('/xydxs')
    },
    openXJ(){
      this.$router.push('/xj')
    }

  }

}
</script>

<style lang="less" scoped>


body {
  font-family: 'myriad-pro', 'Arial' !important;
  margin: 0;
  padding: 0;
}

.w-100 {
  width: 100%;
}

.flex {
  display: flex;
}

.flex-0 {
  flex: 0 0 auto;
}

.flex_c_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.align-c {
  align-items: center;
}

.align-t {
  align-items: flex-start;
}

.align-b {
  align-items: flex-end;
}

.justify-l {
  justify-content: flex-start;
}

.justify-c {
  justify-content: center;
}

.justify-r {
  justify-content: flex-end;
}

.justify-y {
  justify-content: space-between;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  margin: auto;
  max-width: 68.750vw;
}

ul, li, p {
  margin: 0;
  padding: 0;
  list-style: none;
}


.header {
  position: relative;
  box-sizing: content-box;
  height: 6.875vw;

  > img {
    width: 100%;
  }

  .box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;

    .title {
      font-size: 2.188vw;
      font-weight: bold;
      text-align: center;
      margin-top: 2.240vw;
      text-shadow: 0 0.208vw 0.208vw rgba(0, 0, 0, 0.25);
      background: linear-gradient(180deg, #FFFFFF 0%, #83C3EF 83%, #0184DE 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

  }
}


.bg {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 0.729vw;
  line-height: 1;
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  color: #fff;

}


.dp_con {
  position: relative;
  //background-image: url("../img/line2.svg");
  background-size: 97.6%;
  height: calc(100vh - 6.354vw);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0 0.833vw;
  display: flex;
  margin-top: -2.083vw;


  .left {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .right {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .center {
    width: 100%;
    padding: 0 0.833vw;
  }
}

.card {
  margin-bottom: 0.625vw;
  text-align: left;
  background: rgba(10, 63, 152, 0.2);
  position: relative;
  padding: 0.417vw;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    background-size: 100%;
    background-position: bottom;
    padding-bottom: 0.521vw;
    font-size: 0.938vw;
    font-weight: bold;
    margin-bottom: 0.313vw;
    background-repeat: no-repeat;
    text-shadow: 0 0 0.521vw #00b6ff;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 3.385vw;
      height: 0.156vw;
      background: #0086FF;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 3.646vw;
      right: 2.604vw;
      height: 0.156vw;
      background: #083566;
    }

    .icon1 {
      margin-right: 0.625vw;
      width: 0.781vw;
    }

    .icon2 {
      position: absolute;
      width: 2.500vw;
      bottom: 0;
      right: 0;
    }

    .tag {
      position: absolute;
      right: 0;
      background: #00F535;
      color: #fff;
      font-size: 0.729vw;
      padding: 0.156vw 0.313vw;
      border-radius: 0.156vw;

      &.red {
        background: #F50000;
      }
    }
  }

  .body {
    position: relative;
    padding: 0.417vw;
    box-sizing: border-box;
    height: calc(100% - 2.396vw);

    > .img {
      position: absolute;
      width: 0.521vw;

      &.t1 {
        left: 0;
        top: 0;
      }

      &.t2 {
        right: 0;
        top: 0;
        transform: rotate(90deg);
      }

      &.t3 {
        left: 0;
        bottom: 0;
        transform: rotate(270deg);
      }

      &.t4 {
        right: 0;
        bottom: 0;
        transform: rotate(180deg);
      }
    }

  }
}

.height_50 {
  height: calc(50% - 0.625vw)
}

.height_3 {
  height: calc(33.33% - 0.625vw)
}

.height_6 {
  height: calc(66.66% - 0.625vw)
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.313vw; /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0); /* 轨道背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #9dbfd2; /* 滑块背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}


.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  img {
    display: block;
    margin: auto;
    width: 70.729vw;
  }
}

.sckg {
  display: flex;
  justify-content: space-between;

  .item {
    width: 4.688vw;
    text-align: center;

    img {
      width: 100%;
      display: block;
    }

    .text1 {
      position: relative;
      top: -2.604vw;
      font-weight: bold;
      font-size: 1.458vw;
      color: #FFFFFF;
      line-height: 1;
      background: linear-gradient(180deg, #FFFFFF 0%, #55D0FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-top: -0.781vw;
    }

    .text2 {
      font-size: 0.625vw;
    }
  }
}

.sckg_tb {
  height: calc(100% - 6.458vw);
  margin-top: 0.625vw;
}

.sbxj {
  display: flex;
  justify-content: space-between;

  .item {
    flex: 1;
    text-align: center;

    img {
      width: 3.646vw;
    }

    .text1 {
      font-size: 0.573vw;
      margin: 0.521vw 0;
    }

    .text2 {
      font-size: 1.042vw;

      small {
        font-size: 0.677vw;
      }
    }
  }
}

.sbxj_tb {
  height: calc(100% - 7.813vw);
  margin-top: 0.625vw;
}


.znaf_tb {
  display: flex;
  height: 100%;
}

.ydtj {
  display: flex;

  .icon1 {
    width: 5.729vw;
    margin: 1.042vw 1.302vw 0 0.625vw;
  }

  .item {
    position: relative;
    font-size: 0.729vw;
    margin-bottom: 0.625vw;

    img {
      width: 100%;
      display: block;
    }

    .text1 {
    }

    .text2 {
      font-size: 1.250vw;
      font-weight: bold;
      position: relative;
      top: -0.052vw;
    }

    .text3 {
      margin-left: 0.625vw;
    }

    .info {
      position: absolute;
      left: 1.354vw;
      right: 0.729vw;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
    }
  }
}

.ydtj_tb {
  height: calc(100% - 8.125vw);
}

.sbjx {
  display: flex;
  justify-content: space-around;

  .item {
    text-align: center;
    flex: 1;

    div {
      height: 5.208vw;
    }

    p {
      margin-top: 0.625vw;
    }

    &.v2 {
      div {
        height: 6.771vw
      }
    }
  }
}


.sbjx_tb {
  height: calc(100% - 7.292vw);
  margin-top: 0.625vw;

}

.zw {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.sblyl {
  height: 100%;
}


.sbxj_tb {
  height: calc(100% - 8.594vw);
  margin-top: 0.625vw;
}


.xnzb_c {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .r1 {
    width: 21.354vw;

    .item {
      margin: 2.083vw 0;
    }

    .line {
      height: 0.156vw;
      background: rgba(255, 255, 255, 0.28);
      display: flex;
      justify-content: space-between;
      align-items: center;

      &::before, &::after {
        content: "";
        width: 1.146vw;
        height: 0.156vw;
        background: #FED9A6;
        box-shadow: 0 0 0.313vw 0 #FED9A6;
      }
    }

    .box {
      margin: 0.417vw 0;
      background: #003E59;
      border: 0.052vw solid #00F9FF;
      height: 4.167vw;
      display: flex;
      align-items: center;
      padding: 0 1.250vw 0 0;
      box-sizing: border-box;

      img {
        width: 4.167vw;
        height: 4.167vw;
        margin-right: 0.625vw;
      }

      .text1 {
        font-size: 0.885vw;
      }

      .text2 {
        font-size: 0.729vw;
        margin-top: 0.625vw;
      }

      .text3 {
        font-size: 1.667vw;
        color: #12E4F5;
        font-weight: bold;
      }

      &.v2 {
        background: #0B2248;
        border: 0.052vw solid #2F6EDD;

        .text3 {
          color: #2F6EDD;
        }
      }
    }
  }

  .r2 {
    position: relative;

    .bg2 {
      width: 26.823vw;
      display: block;
      padding: 2.083vw 2.083vw 0 2.083vw;
      box-sizing: border-box;
    }

    .item {
      text-align: center;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;

      .text1 {
        width: 3.333vw;
        height: 3.333vw;
        text-align: center;
        line-height: 3.333vw;
        background-image: url("../img/icon7.svg");
        border-radius: 100%;
        margin: auto;
        font-size: 1.042vw;
      }

      .text2 {
        margin-top: 0.417vw;
      }

      &:nth-child(1) {
        top: 35%;
      }

      &:nth-child(2) {
        top: 0;
        left: 13%;
      }

      &:nth-child(3) {
        top: 0;
        left: 75%;
      }

      &:nth-child(4) {
        top: 38%;
        left: 87%;
      }
    }
  }
}


.scgl-title {
  text-align: center;
  margin-bottom: 0.625vw;
}

.scgl_t1 {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 50%;
    height: 50%;
    padding: 0.625vw 0;
    box-sizing: border-box;
    display: flex;

    .flex-0 {
      height: 100%;
      width: 50%;
    }

    .flex_c_c {
      justify-content: flex-start;
      padding-left: 0.625vw;
    }
  }
}

.scgl_t2 {
  .tb {
    height: calc(100% - 2.292vw);
  }
}


.c_img {
  position: absolute;
  width: 50%;
  left: 25%;
  top: 10%;

  img {
    width: 100%;
  }
}


.scgl_t3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .item {
    width: 16.667vw;
    height: 4.635vw;
    background-image: url("../img/p5.svg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.042vw;

    .text1 {
      margin-right: 1.042vw;
    }

    .text2 {
      font-size: 2.188vw;
      font-weight: bold;
      color: #0BF9FE;

      small {
        font-size: 0.833vw;
        font-weight: 500;
        color: #fff;
      }
    }

    &.v2 {
      background-image: url("../img/p6.svg");

      .text2 {
        color: #07E96C;
      }
    }
  }
}


.sjtj {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 1;

  .item {
    width: 7.083vw;
    text-align: center;

    .text1 {
      font-size: 1.406vw;
      color: #FFFFFF;
      letter-spacing: 0.052vw;
      font-style: normal;
      text-transform: none;
    }

    .text2 {
      color: rgba(255, 255, 255, 0.7);
      width: 7.083vw;
      line-height: 1.458vw;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #4E3B01 49%, rgba(0, 0, 0, 0) 100%);
      position: relative;
      margin-top: 0.625vw;

      &::after, &::before {
        content: "";
        width: 100%;
        height: 0.052vw;
        background: linear-gradient(90deg, rgba(87, 69, 0, 0) 0%, #FFCB00 49%, rgba(126, 101, 0, 0) 100%);
        position: absolute;
        top: 0;
        left: 0;
      }

      &::before {
        bottom: 0;
        top: auto;
      }
    }

    img {
      width: 5.417vw;
      margin-top: -1.042vw;
    }

    &.v2 {
      margin-top: 3.646vw;

      img {
        width: 6.458vw;
      }

      .text2 {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.02) 0%, #01434E 49%, rgba(0, 0, 0, 0) 100%);

        &::after, &::before {
          background: linear-gradient(90deg, rgba(0, 46, 87, 0) 0%, #00C2FF 49%, rgba(0, 104, 126, 0) 100%);
        }
      }
    }
  }
}

.sjtj-bg {
  width: 100%;
  margin-top: -100%;
  position: relative;
  top: -3.490vw;
}


.zhaf_t1 {
  padding: 2.083vw 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;

  .r1 {
    height: 50%;
    position: relative;

    img {
      height: 100%;
      display: block;
    }

    .box {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 1.250vw;

      img {
        width: 100%;
        height: 100%;

      }
    }
  }

  .r2 {
    height: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    img {
      height: 90%;
      display: block;
    }
  }
}

.zhaf_t2 {
  overflow: auto;
  height: 100%;

  ul {

    li {
      display: flex;
      margin-bottom: 0.625vw;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0.781vw;
        height: 100%;
        background: #ff0000;
        top: 1.042vw;
        width: 0.052vw;
      }

      &:nth-last-child(1) {
        &::before {
          content: "";
          position: absolute;
          left: 0.781vw;
          height: 0;
          background: #ff0000;
          top: 1.042vw;
          width: 0.052vw;
        }
      }

      .icon1 {
        width: 1.510vw;
        margin-right: 0.625vw;
      }

      .info {
        position: relative;

        .box {
          position: absolute;
          z-index: 2;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          padding: 1.250vw;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .btn_box {
            position: absolute;
            right: 1.250vw;
            bottom: 1.250vw;

            button {
              width: 5.521vw;
              height: 1.667vw;
              background: #2F51FF;
              border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
              display: flex;
              align-items: center;
              justify-content: center;
              border: none;
              color: #fff;
              margin-top: 0.625vw;
              cursor: pointer;

              &:hover {
                background: #4a68ff;
              }
            }
          }
        }
      }
    }
  }
}

.zhaf_t3 {
  width: 29.688vw !important;
}

.dp_con {
  position: relative;
  z-index: 9;

  .left.v2 {
    width: 55%;
    padding-right: 0.417vw;
  }

  .right.v2 {
    width: 45%;
    padding-left: 0.417vw;
  }
}

.ydtj_t1 {
  height: 100%;
  display: block;
  width: 100%;
  object-fit: cover;
  padding-bottom: 0.625vw;
  box-sizing: border-box;
}

.ydtj_t2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item {
    background-image: url("../img/bg6.svg");
    width: 13.333vw;
    height: 5.156vw;
    background-size: cover;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    p {
      padding-left: 4.167vw;
      width: 100%;
      box-sizing: border-box;
    }

    .text1 {
      font-weight: bold;
      font-size: 1.354vw;
      letter-spacing: 0.104vw;
      background: linear-gradient(180deg, #FFFFFF 0%, #20F14E 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 0.417vw;
    }

    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      margin-bottom: 1.042vw;
      background-image: url("../img/bg5.svg");

      .text1 {
        background: linear-gradient(180deg, #FFFFFF 0%, #0BF9FE 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }
  }
}

.p-8 {
  margin: 0 -0.417vw;

  .w-100 {
    padding: 0 0.417vw;
    box-sizing: border-box;
  }
}

.scgl_t4 {
  height: calc(60% - 0.625vw);
  margin-bottom: 0.625vw;
  padding-top: 2.604vw;
  box-sizing: border-box
}

.zhaf_h {
  height: calc(50% - 8.646vw - 0.625vw)
}

.ydtj_h {
  height: calc(50% - 8.333vw)
}


.sbdxj_t1 {
  display: flex;
  align-items: center;
  justify-content: space-around;

  img {
    width: 7.500vw;
  }

  .text1 {
    text-align: center;
    font-size: 1.250vw;
  }

  .text2 {
    text-align: center;
    color: #00F535;
    font-size: 1.250vw;
    margin-top: 1.563vw;
  }
}


.sbdxj_t2 {
  overflow: auto;
  height: calc(100vh - 24.333vw);

  img {
    width: 2.813vw;
    margin-right: 1.042vw;
  }

  .text1 {
    text-align: center;
    font-size: 0.833vw;
    min-width: 10vw;
  }

  .flex_c_c {
    margin: 0.833vw 0;
  }
}

.sbdxj_t3 {
  width: 100%;
  height: 100%;

  tr {
    td {
      line-height: 1.146vw;

      &.text1 {
        color: #00F8FF;
        font-size: 0.833vw;
      }

      &.text2 {
        color: #66A3FF;
        text-align: right;
        padding-right: 0.625vw;
      }

      input {
        width: 3.333vw;
        height: 1.042vw;
        background: none;
        border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
        border: 0.052vw solid #4193FF;
        display: block;
        color: #fff;
        font-size: 0.729vw;
        text-align: center;
      }
    }
  }
}

.sbdxj_t4 {
  display: flex;
  align-items: center;
  position: relative;
  height: calc(100% - 3.125vw);
  margin: 1.042vw 1.042vw 0 1.042vw;

  .sb {
    width: 90%;
    margin: 10% 0 0 auto;
    opacity: 0.7;
    pointer-events: none;
  }
}


.card2 {

  position: absolute;
  left: 0;
  top: 0;

  .bg2 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    .r1 {
      display: flex;

      img {
        height: 2.604vw;

        &:nth-child(2) {
          width: 100%;
        }
      }
    }

    .r2 {
      height: calc(100% - 5.208vw);
      width: 100%;
      display: block;
    }

    .r3 {
      display: flex;

      img {
        height: 2.604vw;

        &:nth-child(2) {
          width: 100%;
        }
      }
    }
  }

  .box {
    padding: 1.250vw;
    min-width: 16.146vw;
    box-sizing: border-box;
    position: relative;
  }

}


.dydxs_box {
  height: 100%;
  width: 100%;

  .row {
    display: flex;
    height: 50%;
    width: 100%;

    .col {
      width: 20%;
      height: 100%;
      padding: 0.625vw 0.208vw;
      box-sizing: border-box;
    }
  }
}

.dydxs_t1{
  position: relative;
  height: 100%;
  .sb{
    display: block;
    width: 60%;
    position: absolute;
    right: 0;
    bottom: 0;
    top:10vh;
  }
}
</style>



